<template>
  <div>
    <content-show :list="topicList" @refreshData="refreshData()"></content-show>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :hide-on-single-page="true"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { mytopic } from "../../../api/topic";
import {timeQuantum} from "../../../util/timeQuantum"
import ContentShow from "../../contentshow/ContentShow";
export default {
  name: "MyTopic",
  components: { ContentShow },
  data() {
    return {
      topicList: [],
      query: {
        pageNum: 1,
        pageSize: 5,
        uid: localStorage.getItem("uid"),
        nowuid: localStorage.getItem("uid")
      },
      pageTotal: 0,
    };
  },
  created() {
    this.getMyTopic();
  },
  methods: {
    refreshData() {
      this.getMyTopic()
    },
    getMyTopic() {
      // console.log("获取数据");
      mytopic(this.query).then((res) => {
        if (res.code == 200) {
          let list = res.data.list;
          // 分页数据
          this.pageTotal = res.data.total;

          // 获取话题内容的文本（用来简略展示）
          var d = document.createElement("div");
          for (let index = 0; index < list.length; index++) {
            d.innerHTML = list[index].content;
            let text = d.innerText
            if (text.length > 80) {
              list[index].text = text.slice(0,80) + "...";
            } else {
              list[index].text = text.slice(0,40) + "...";
            }

            list[index].id = list[index].tid
            list[index].tag = false;
             // 评论展示
          list[index].disShow = true
            // 修改时间的展示方式
            list[index].createtime = timeQuantum(
              list[index].createtime
            );
          }
          this.topicList = list
         
        }
      });
    },
    handlePageChange(val) {
      this.$set(this.query, 'pageNum', val);
      this.getMyTopic();
    },
  },
};
</script>
<style scoped>
.pagination {
  margin: 0 auto;
  text-align: center;
  background-color: #fff;
}
</style>
